<template>
  <div :style="{ height: height, width: width }" id="map" class="map"></div>
</template>

<script>
import markerRed from "@/assets/images/map/marker-icon/camera32.png";

export default {
  props: {
    height: {
      type: String,
      default: "1000px",
    },
    width: {
      type: String,
      default: "100%",
    },
    center: {
      type: Object,
      //台湾  台中市
      default: () => ({ lng: 120.25892022454639, lat: 24.195578777484076 }),
    },
    zoom: {
      type: Number,
      default: 10,
    },
    enableScrollWheelZoom: {
      type: Boolean,
      default: true,
    },
    nightMode: {
      type: Boolean,
      default: true,
    },
    markers: {
      type: Array,
      default: () => [
        {
          lng: 121.509062,
          lat: 25.044332,
          color: "yellow",
          params: { name: "摄像头地址" },
        },
      ],
    },
  },
  data() {
    return {
      pointInfo: [],
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new BMap.Map("map"); // 创建地图实例
      const point = new BMap.Point(this.center.lng, this.center.lat); // 创建点坐标
      map.centerAndZoom(point, this.zoom); // 初始化地图，设置中心点坐标和地图级别
      map.enableScrollWheelZoom(this.enableScrollWheelZoom); // 开启鼠标滚轮缩放

      map.setMapType(BMAP_HYBRID_MAP); // Set the map type to hybrid directly

      map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_HYBRID_MAP], // Optionally, restrict to hybrid map type
        })
      );
      this.map = map;
    },
    //从外部传进来的数据 进行标点
    setData(data) {
      console.log("百度地图datadatadata", data);
      this.pointInfo = data.points;
      this.addMarkersPoint();
    },
    //标点的具体实现
    addMarkersPoint() {
      this.pointInfo.forEach((markerData) => {
        const point = new BMap.Point(markerData.lng, markerData.lat);

        // Create a custom icon
        const icon = new BMap.Icon(markerRed, new BMap.Size(32, 32)); // Adjust size as needed

        // Create a marker with the custom icon
        const marker = new BMap.Marker(point, { icon: icon });

        this.map.addOverlay(marker); // 将标注添加到地图中

        const content = `<div>
              <h4 class="BMap_title">摄像头信息</h4>
             <div style="display: flex;flex-direction: row;justify-content: space-between;">
                <div style="width: 50%;">
                    <p class="BMap_content">摄像头品牌: ${markerData.cameraBrand}</p>
                    <p class="BMap_content">经度: ${markerData.lng}</p>
                    <p class="BMap_content">纬度: ${markerData.lat}</p>
                    <p class="BMap_content">IP: ${markerData.cameraIp}</p>
                    <p class="BMap_content">位置: ${markerData.cameraEffect}</p>
                    <p class="BMap_content">危害等级: ${markerData.cameraLevel}</p>
                    <button class="BMap_btn" type="button" id="markerbtnV" data-id="${markerData.id}">视频信息</button>
                    <button class="BMap_btn" type="button" id="markerbtnD" data-id="${markerData.id}">查看详情</button>
                </div>
                <div style="width: 50%;">
                  <img
                    style="width: 200px; height: 200px; object-fit: contain;"
                    data-id="${markerData.id}"
                    id="markerImg"
                  />
                </div>
              </div>
            </div>`;
        this.addClickHandler(content, marker);
      });
    },
    addClickHandler(content, marker) {
      marker.addEventListener("click", (e) => {
        this.openInfo(content, e);
      });
    },
    openInfo(content, e) {
      var p = e.target;
      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
      var infoWindow = new BMap.InfoWindow(content); // 创建信息窗口对象
      this.map.openInfoWindow(infoWindow, point); //开启信息窗口
      //判断窗口的打开状态
      if (!infoWindow.isOpen()) {
        console.log("infoWindow.isOpen()", 1);
        //如果没有打开，则监听打开事件，获取按钮，添加事件
        infoWindow.addEventListener("open", () => {
          document.getElementById("markerbtnV").onclick = (e) => {
            console.log("视频信息", e.target.dataset.id);
            this.videoInfo(e.target.dataset.id);
          };
          document.getElementById("markerbtnD").onclick = (e) => {
            console.log("跳转", e.target.dataset.id);
            this.toantiLocalizationdetail(e.target.dataset.id);
          };
          //获取图片添加地址展示图片
          let imgid = document.getElementById("markerImg").dataset.id;
          this.pointInfo.forEach((item) => {
            if (item.id == imgid) {
              if (!item.cameraViewurl) return "";
              //xx.html 替换成faststream.jpg?stream=full&fps=16&rand=676154

              let url = item.cameraViewurl;

              console.log("之前的之前的之前的之前的之前的之前的之前的url", url);
              //将url中最后/之后的字符串替换为faststream.jpg?stream=full&fps=16&rand=676154
              url = url.replace(
                /\/[^/]+$/,
                "/faststream.jpg?stream=full&fps=16&rand=676154"
              );
              console.log("之后之后之后之后之后之后之后之后", url);

              document.getElementById("markerImg").src = url;
            }
          });
        });
      } else {
        console.log("infoWindow.isOpen()", 2);

        //如果已经打开，直接获取按钮，添加事件
        document.getElementById("markerbtnV").onclick = (e) => {
          console.log("视频信息", e.target.dataset.id);
          this.videoInfo(e.target.dataset.id);
        };
        document.getElementById("markerbtnD").onclick = (e) => {
          console.log("跳转", e.target.dataset.id);
          this.toantiLocalizationdetail(e.target.dataset.id);
        };
        //获取图片添加地址展示图片
        let imgid = document.getElementById("markerImg").dataset.id;
        this.pointInfo.forEach((item) => {
          if (item.id == imgid) {
              if (!item.cameraViewurl) return "";
              //xx.html 替换成faststream.jpg?stream=full&fps=16&rand=676154

              let url = item.cameraViewurl;

              console.log("之前的之前的之前的之前的之前的之前的之前的url", url);
              //将url中最后/之后的字符串替换为faststream.jpg?stream=full&fps=16&rand=676154
              url = url.replace(
                /\/[^/]+$/,
                "/faststream.jpg?stream=full&fps=16&rand=676154"
              );
              console.log("之后之后之后之后之后之后之后之后", url);

              document.getElementById("markerImg").src = url;
            }
        });
      }
    },

    toantiLocalizationdetail(id) {
      this.$router.push(`/positionAnalysis/cameraManagementD?id=${id}`);
    },
    videoInfo(id) {
      this.pointInfo.forEach((item) => {
        if (item.id == id) {
          window.open(item.cameraViewurl, "_blank", "width=600,height=400");
        }
      });
    },
    //坐标转换
    convertCoordinates(lng, lat) {
      // Example of a coordinate conversion method
      // This is a placeholder for actual conversion logic
      return { lng: lng + 0.1, lat: lat + 0.1 };
    },
    setCenter(lng, lat) {
      const point = new BMap.Point(lng, lat);
      this.map.centerAndZoom(point, this.zoom);
    },
  },
};
</script>

<style>
.map {
  width: 100%;
  height: 500px;
}
/*地图标题 infoWindow*/
.BMap_bubble_title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  background: transparent !important;
}

.BMap_pop .BMap_top {
  background: #1f4f86b5 !important;
  border: 0 !important;
}

.BMap_pop .BMap_center {
  /* width: 281px !important;s */
  border: 0 !important;
  background: #1f4f86b5 !important;
}

.BMap_pop .BMap_bottom {
  border: 0 !important;
  background: #1f4f86b5 !important;
}
.BMap_title {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  background: transparent !important;
  display: flex;
  justify-content: center;
}

.BMap_content {
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  background: transparent !important;
}

.BMap_btn {
}

.BMap_pop div:nth-child(3) {
  background: transparent !important;
}

.BMap_pop div:nth-child(3) div {
  border-radius: 3px;
  background: #1f4f86b5 !important;
  border: 0 !important;
}

.BMap_pop div:nth-child(1) {
  border-radius: 3px 0 0 0;
  background: transparent !important;
  border: 0 !important;
}

.BMap_pop div:nth-child(1) div {
  /* background: #1f4f86b5 !important; */
}

.BMap_pop div:nth-child(5) {
  border-radius: 0 0 0 3px;
  background: transparent !important;
  border: 0 !important;
}

.BMap_pop div:nth-child(5) div {
  border-radius: 3px;
  background: #1f4f86b5 !important;
}

.BMap_pop div:nth-child(7) {
  background: transparent !important;
  left: 226px;
}

.BMap_pop div:nth-child(7) div {
  border-radius: 3px;
  background: #1f4f86b5 !important;
}

/*替换箭头*/
/* img[src="http://api0.map.bdimg.com/images/iw3.png"] {
    content: url('../images/iw3.png');
}

img[src="https://api.map.baidu.com/images/iw3.png"] {
    opacity: 0.7;
    margin-top: -692px !important;
    filter: alpha(opacity=70);
    content: url('../images/iw3.png');
} */
</style>
